<template>
  <div class="auto">
    <div class="card-header">
        <img
          src="../../assets/images/login_pic.png"
          alt=""
        />
      </div>
    <div class="content">

      <a-tabs type="card" class="card" @change="onTaget">
        <a-tab-pane key="1" tab="账号登录">
          <Login v-if="flag" />
        </a-tab-pane>
        <!-- <a-tab-pane key="2" tab="账号注册">
        <Register v-if="!flag" />
      </a-tab-pane> -->
      </a-tabs>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'

import Login from './components/login.vue'
// import Register from './components/register.vue'
export default defineComponent({
  components: {
    Login
    // Register
  },
  setup () {
    const flag = ref(true)
    const onTaget = () => {
      flag.value = !flag.value
    }
    return {
      onTaget,
      flag
    }
  }
})
</script>
<style lang="less" scoped>
.auto {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  // background: #f2f2f2;

 .card-header {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: -1;
     img{
       width: 100%;
       height: 100%;
     }
    }
  .content {
    // border: 1px solid;
    position: relative;
    background: #fff;
    border-radius: .9375rem /* 15/16 */;

    .card {
      width: 100%;
      height: 100%;
      background: #fff;
      border-radius: .9375rem /* 15/16 */;
      /deep/.ant-tabs-nav-wrap {
        text-align: center;
      }
      .pd-45 {
        padding: 45px;
      }
    }
  }
}
</style>
